<template>
    <div class="detailCom">
        <div class="title">
            <img src="@/assets/image/img1.png" /> 墓室信息
        </div>
        <div class="content">
            <img :src="info.show_image" />
            <div class="right">
                <div class="name">{{ info.name }}</div>
                <div class="code-cont">
                    <img class="code" :src="info.mobile_image" />
                    手机扫码查看
                </div>
            </div>
        </div>
        <div class="title">
            <img src="@/assets/image/img2.png" /> 相关藏品
        </div>
        <search :id="id" />
    </div>
</template>

<script>
import search from './search.vue'
import { storeroomInfo } from "@/api/tomb_detail";
export default {
    components: {
        search
    },
    data() {
        return {
            id: 0,
            info: {}
        }
    },
    created() {
        this.id = this.$route.query.id
        this.storeroomInfo()
    },
    methods: {
        storeroomInfo() {
            storeroomInfo({ id: this.id }).then(res => {
                console.log(res.data);
                this.info = res.data
            }).catch(e => {
                console.log(e);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.detailCom {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;

    .title {
        font-size: 24px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #683C19;
        text-align: left;
        margin: 10px 0;
        display: flex;
        align-items: center;

        img {
            margin-right: 20px;
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-radius: 18px;
        background: #fff;

        img {
            width: 63%;
            height: 420px;
        }

        .right {
            width: 37%;
            position: relative;

            .name {
                font-size: 30px;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #683C19;
                margin: 40px 0;
            }

            .code-cont {
                position: absolute;
                bottom: 0;
                left: calc(50% - 83px);
                font-size: 20px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #683C19;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;

                .code {
                    border: 1px solid #EACFA5;
                    width: 166px;
                    height: 166px;
                    margin: 10px auto;
                }
            }
        }

    }
}
</style>